<div id="mycanvas" style="width:500px;height:300px;"></div>
<script type="module">
    import { Canvas, TreeLayout } from 'vislite';

    var el = document.getElementById('mycanvas');
    var painter = new Canvas(el);

    var treeLayout = new TreeLayout();

    treeLayout.setOption({
        type: "rect",
        direction: "TB",
        x: 250,
        y: 20,
        width: 500,
        height: 260
    });

    var data = {
        "name": "前端",
        "children": [{
            "name": "基础",
            "children": [{
                "name": "HTML"
            }, {
                "name": "CSS"
            }, {
                "name": "JavaScript"
            }, {
                "name": "DOM"
            }]
        }, {
            "name": "框架"
        }, {
            "name": "小技术"
        }]
    };

    treeLayout.bind(data, function (tree) {

        painter.clearRect(0, 0, 500, 300);

        // 绘制连线
        painter.setRegion("").config({
            strokeStyle: 'red'
        });
        for (var key in tree.node) {
            if (tree.node[key].show && key != tree.root) {
                var pid = tree.node[key].pid;

                var dist = (tree.node[key].top - tree.node[pid].top) * 0.5;

                painter
                    .beginPath()
                    .moveTo(tree.node[key].left, tree.node[key].top)
                    .bezierCurveTo(
                        tree.node[key].left, tree.node[key].top - dist,
                        tree.node[pid].left, tree.node[pid].top + dist,
                        tree.node[pid].left, tree.node[pid].top
                    ).stroke();
            }
        }

        // 绘制节点和文字
        painter.config({
            strokeStyle: 'red',
            fontSize: 12
        });
        for (var key in tree.node) {
            if (tree.node[key].show) {
                if (!tree.node[key].isOpen && tree.node[key].children.length > 0) {
                    painter.config({
                        fillStyle: "red"
                    });
                } else {
                    painter.config({
                        fillStyle: "#ffffff"
                    });
                }
                painter.setRegion(key).fullCircle(tree.node[key].left, tree.node[key].top, 10);

                painter.setRegion("").config({
                    fillStyle: "black"
                }).fillText(key.replace(/\-\d+$/, ''), tree.node[key].left + 15, tree.node[key].top);
            }
        }

    });

    el.addEventListener('click', function (event) {
        painter.getRegion(event.offsetX, event.offsetY).then(function (regionName) {
            if (regionName) {
                treeLayout.toggleNode(regionName);
            }
        });
    });
</script>